<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>老柳家的迷你minitab</title>
    <style>
        body {


            margin: 20px;
            padding: 50px;
            background-color: #f5f7fa;


        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 40px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #303133;
            margin-bottom: 40px;
        }

        .form-item {
            margin-bottom: 50px;
        }

        .form-item label {
            display: block;
            margin-bottom: 8px;
            color: #606266;
        }

        .form-item input,
        .form-item select {
            width: 100%;
            padding: 10px;
            border: 1px solid #dcdfe6;
            border-radius: 40px;
            box-sizing: border-box;
        }

        .form-item button {
            width: 100%;
            padding: 12px;
            background-color: white;
            border: 1px solid #dcdfe6;
            border-radius: 40px;
            color: #409EFF;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s, border-color 0.3s;
        }

        .form-item button:hover {
            background-color: #ecf5ff;
            border-color: #409EFF;
        }

        .result {
            margin-top: 20px;
            padding: 20px;
            border: 2px solid #ebeef5;
            border-radius: 40px;
            background-color: #fff;
            width: 95%;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s, transform 0.5s;
        }

        .result.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .result.success {
            border-left: 5px solid #67c23a;
        }

        .result.failure {
            border-left: 5px solid #f56c6c;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>老柳家的minitab：请上传Excel文件</h1>
        <form id="uploadForm" enctype="multipart/form-data">
            <div class="form-item">
                <label for="fileInput">选择文件</label>
                <input type="file" name="file" id="fileInput">
            </div>
            <div class="form-item">
                <label for="testType">选择测试类型</label>
                <select id="testType" name="test_type">
                    <option value="shapiro">正态分布检验</option>
                    <option value="ttest">双样本T检验</option>
                    <option value="anova">Anova检验</option>
                </select>
            </div>
            <div class="form-item">
                <button type="button" onclick="uploadFile()">进行分析</button>
            </div>
        </form>
        <div id="result" class="result"></div>
    </div>
    <script>
        function uploadFile() {
            const formData = new FormData();
            const fileInput = document.querySelector('input[type="file"]');
            const testType = document.getElementById('testType').value;

            formData.append('file', fileInput.files[0]);
            formData.append('test_type', testType);

            fetch('/', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                const message = data.message || data.error;
                const status = data.message ? 'success' : 'failure';
                const resultDiv = document.getElementById('result');
                resultDiv.textContent = message;
                resultDiv.style.opacity = status === 'success' ? 1 : 0.5;
                resultDiv.style.transform = status === 'success' ? 'translateY(0)' : 'translateY(20px)';
                resultDiv.classList.remove('failure');
                if (status === 'failure') {
                    resultDiv.classList.add('failure');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                const resultDiv = document.getElementById('result');
                resultDiv.textContent = 'An error occurred while uploading the file.';
                resultDiv.style.opacity = 0.5;
                resultDiv.style.transform = 'translateY(20px)';
                resultDiv.classList.add('failure');
            });
        }
    </script>
</body>
</html>